<template>
  <div>
    <ag-grid-vue
      style="height: 500px"
      class="ag-theme-alpine"
      :suppressMovableColumns="true"
      :columnDefs="columnDefs"
      :rowData="rowData"
      :suppressRowTransform="true"
      :suppressRowHoverHighlight="true"
      :suppressCellFocus="true"
      :rowStyle="{
        background: '#fff',
      }"
    >
    </ag-grid-vue>
  </div>
</template>

<script>
import { AgGridVue } from "ag-grid-vue";
export default {
  name: "AGTablePage",
  data() {
    return {
      columnDefs: null,
      rowData: null,
    };
  },
  components: {
    AgGridVue,
  },
  beforeMount() {
    let idx = 0;
    const getProp = () => {
      return "" + idx++;
    };

    let tmp = [];
    for (let i = 0; i < 255; i++) {
      let col = {};
      if (i < 3) {
        col = {
          headerName: `f_${i}`,
          pinned: true,
          field: `name${i}`,
          width: 50,
          spanHeaderHeight: true,
        };

        if (i == 1) {
          col.rowSpan = this.rowSpan;
          col.cellClassRules = {
            "cell-span": (params) =>
              params.value?.slice(params.value?.length - 2) == "_0",
          };
        }
      } else {
        col = {
          headerName: `t1_${i}`,
          children: [
            {
              headerName: `t2_${i}`,
              children: [
                { field: getProp(), width: 50 },
                { field: getProp(), width: 50 },
              ],
            },
            {
              headerName: `t21_${i}`,
              columnGroupShow: "open",
              children: [
                { field: getProp(), width: 50 },
                { field: getProp(), width: 50 },
              ],
            },
          ],
        };
      }
      tmp.push(col);
    }
    this.columnDefs = tmp;

    let rowTmp = [];
    const sec = [15, 5, 2, 6, 4, 2, 6];
    for (const s of sec) {
      for (let i = 0; i < s; i++) {
        const row = {
          name0: `0.${s}_${i}`,
          name1: `1.${s}_${i}`,
          name2: `2.${s}_${i}`,
        };
        if (i == 0) {
          row.span = s;
        }

        rowTmp.push(row);
      }
    }
    this.rowData = rowTmp;
    console.log('rowTmp',rowTmp)
  },

  methods: {
    rowSpan(params) {
      // console.log("params.data.span", params.data.span);
      if (params.data.span) {
        return params.data.span;
      }
      return 1;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~ag-grid-community/styles/ag-grid.css";
@import "~ag-grid-community/styles/ag-theme-alpine.css";
::v-deep {
  .ag-cell-value,
  .ag-header-cell {
    padding: unset;
  }

  .ag-header-group-text,
  .ag-header-cell-text {
    font-size: 11px;
    font-weight: 400;
  }

  .ag-header-group-cell-label,
  .ag-header-cell-label {
    justify-content: center;
  }

  .cell-span {
    background: #f00;
    border-bottom: 1px solid #dde2eb;
    border-left: 1px solid #dde2eb;
    border-right: 1px solid #dde2eb;
    display: flex;
    align-items: center;
  }
  .ag-header-group-cell,
  .ag-center-cols-viewport .ag-cell-value,
  .ag-cell-label-container {
    border-right: 1px solid #dde2eb;
  }
}
</style>
